@use "sass:color";
@use "sass:list";

$namespace: 'bc';

@function defineColor($color) {
  @return (
    "lighter": color.mix($color, #ffffff, 80%),
    "light": color.mix($color, #ffffff, 90%),
    "": $color,
    "dark": color.mix($color, #000000, 90%),
    "darker": color.mix($color, #000000, 80%),
    "R": color.red($color),
    "G": color.green($color),
    "B": color.blue($color),
    "H": color.hue($color),
    "S": color.saturation($color),
    "L": color.lightness($color),
  );
}

@function joinVarName($list) {
  $name: '--' + $namespace;
  @each $item in $list {
    @if $item != '' {
      $name: $name + '-' + $item;
    }
  }
  @return $name;
}

@function getCssVarName($args...) {
  @return joinVarName($args);
}

@function getCssVar($args...) {
  @return var(#{joinVarName($args)});
}

@mixin set-var-color($name, $type, $args...) {
  $list: (color, $type);
  @each $item in $args {
    @if $item != '' {
      $list: list.append($list, $item);
    }
  }
  @debug var(#{joinVarName($list)});
  #{$name}: var(#{joinVarName($list)});
}
